<template>
	<view class="content">
		<button class="size" @tap="create">创建一个XMLHttpRequest 对象</button>
		<button class="size" @tap="abort">取消当前响应，关闭连接并且结束任何未决的网络活动</button>
		<button class="size" @tap="getAllResponseHeaders">获取HTTP响应头部信息</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xhr: null
			}
		},
		methods: {
			create() {
				let that = this;
				that.xhr = new plus.net.XMLHttpRequest();
				that.xhr.onreadystatechange = function() {
					switch (that.xhr.readyState) {
						case 0:
							console.log("xhr请求已初始化", 0);
							break;
						case 1:
							console.log("xhr请求已打开", 1);
							break;
						case 2:
							console.log("xhr请求已发送", 2);
							break;
						case 3:
							console.log("xhr请求已响应", 3);
							break;
						case 4:
							if (xhr.status == 200) {
								console.log("xhr请求成功：" + that.xhr.responseText, 4);
							} else {
								console.log("xhr请求失败：" + that.xhr.readyState, 4);
							}
							break;
						default:
							break;
					}
				}
				that.xhr.open("GET", "http://www.baidu.com/");
				that.xhr.send();
			},
			abort() {
				if (this.xhr) {
					this.xhr.abort();
					this.xhr = null;
				}
			},
			getAllResponseHeaders() {
				if (this.xhr) {
					console.log(this.xhr.getAllResponseHeaders());
				}
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.size {
		margin: 30rpx 0;
	}
</style>
